<template>
    <div id="detail">
      <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"/>
      <scroll class="content" ref="scroll" :probeType="3" @scroll="contentScroll">
        <detail-swiper :top-images="topImages"/>
        <detail-base-info :goods="goods"/>
        <detail-shop-info :shop="shop"/>
        <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"/>
        <detail-params-info ref="params" :param-info="paramsInfo"/>
        <detail-comment-info ref="comment" :comment-info="commentInfo"/>
        <goods-list ref="recomment" :goods="recommends"/>
      </scroll>
      <detail-bottom-bar @addCart="addToCart"/>
      <back-top @click.native="backClick" v-show="isShowBackTop"> </back-top>
    </div>
</template>

<script>
  import DetailNavBar from "./childComps/DetailNavBar";
  import DetailSwiper from "./childComps/DetailSwiper";
  import DetailBaseInfo from "./childComps/DetailBaseInfo";
  import DetailShopInfo from "./childComps/DetailShopInfo";
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
  import DetailParamsInfo from "./childComps/DetailParamsInfo";
  import DetailCommentInfo from "./childComps/DetailCommentInfo";
  import DetailBottomBar from "./childComps/DetailBottomBar";

  import Scroll from "components/common/scroll/Scroll";
  import GoodsList from "components/content/goods/GoodsList";


  import {getDetail, Goods, getRecommend, Shop} from "network/detail";
  import {debounce} from "common/utils";
  import {itemListenerMixin, backTopMixin} from "common/mixin";
  import {mapActions} from "vuex"

  export default {
    name: "Detail",
    components: {
      GoodsList,
      DetailShopInfo,
      DetailSwiper,
      DetailNavBar,
      DetailBaseInfo,
      Scroll,
      DetailGoodsInfo,
      DetailParamsInfo,
      DetailCommentInfo,
      DetailBottomBar,
    },
    mixins: [itemListenerMixin, backTopMixin],
    data() {
      return {
        iid: null,
        topImages: [],
        goods: {},
        shop: {},
        detailInfo: {},
        paramsInfo: {},
        commentInfo: {},
        recommends: [],
        themeTopYs: [],/*存组件距离顶部的Y值*/
        getThemeTopYs: null, /*给this.themeTopY赋值的操作*/
      }
    },
    methods: {
      ...mapActions([
        'addCart'
      ]),
      imageLoad() {
        this.$refs.scroll.refresh();
        this.getThemeTopYs()
      },
      titleClick(index) {
        this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 1000)
      },
      contentScroll(position) {
        //滚动超过1000显示回到顶部按钮
        this.isShowBackTop = position.y < -1000;
        //1.获取y值
        const y = -position.y;
        const length = this.themeTopYs.length;
        //2.position和主题中的值进行对比
        for(var i = length-1; i>-1; i--) {
          if(y >= this.themeTopYs[i]) {
            this.$refs.nav.currentIndex = i;
            break;
          }
        }
        /*this.themeTopYs.forEach((v,index) => {
          console.log("值："+v+",下标："+index);
        })*/
      },
      addToCart() {
        const product = {};
        product.image = this.topImages[0];
        product.title = this.goods.title;
        product.desc = this.goods.desc;
        product.price = this.goods.realPrice;
        product.iid = this.iid;
        console.log(product);
        //2.将商品添加到购物车里
        this.addCart(product).then(res => {
          this.$toast.show(res)
        })
      }
    },
    created() {
      //保存传入的iid
      this.iid = this.$route.query.iid;
      //根据iid请求详情数据
      getDetail(this.iid).then(res => {
        const data = res.result;
        this.topImages = data.itemInfo.topImages;/*获取轮播图数据*/
        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services);/*获取商品信息*/
        this.shop = new Shop(data.shopInfo);/*获取店铺信息*/
        this.detailInfo = data.detailInfo;/*获取商品详细信息*/
        this.paramsInfo = data.itemParams;/*获取商品参数信息*/
        //如果有评论再取出来
        if(data.rate.cRate !== 0) {
          this.commentInfo = data.rate.list[0]
        }
      });
      //请求推荐数据数
      getRecommend().then(res => {
        console.log(res);
        this.recommends = res.data.list
      });
      //给 赋值(对给this.themeTopY赋值的操作进行防抖)
      this.getThemeTopYs = debounce(() => {
        this.themeTopYs = [];
        this.themeTopYs.push(0);
        this.themeTopYs.push(this.$refs.params.$el.offsetTop);
        this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
        this.themeTopYs.push(this.$refs.recomment.$el.offsetTop);
        // console.log(this.themeTopYs)
      }, 200);

      /*
      this.$nextTick(() => {
        this.themeTopYs = [];
        this.themeTopYs.push(0);
        this.themeTopYs.push(this.$refs.params.$el.offsetTop);
        this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
        this.themeTopYs.push(this.$refs.recomment.$el.offsetTop);
        console.log(this.themeTopYs)
      })*/
    },
  }
</script>

<style scoped>
  #detail {
    position: relative;
    z-index: 11;
    background-color: #ffffff;
    height: 100vh;
  }
  .detail-nav {
    position: relative;
    z-index: 12;
    background-color: #ffffff;
  }

  .content {
    height: calc(100vh - 44px - 49px);
    /*
    视口高减去detail-nav-bar和detail-bottom-bar高
    */
  }
</style>
